<template>
  <div id="page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-back" @click="goBack" style="margin-right: 8px"
          >返回</span
        >
        <span style="font-size: 18px">新增消息</span>
        <el-button
          style="margin-lift: 10px"
          plain
          type="primary"
          @click="SwitchTarget()"
          :disabled="Disable"
          >{{ this.AddTarget == false ? "添加目标" : "已有目标" }}</el-button
        >
        <div
          style="float: right; display: inline-block; width: 20px; height: 20px"
        ></div>
        <el-button plain type="primary" @click="SwitchPages()">{{
          this.PageSwitching == false ? "添加页面" : "已有页面"
        }}</el-button>
      </div>
      <div class="pageDiv">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item v-if="PageSwitching" label="新增页面" prop="PageName">
            <el-input
              v-model="form.PageName"
              placeholder="新增页面"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="!PageSwitching"
            label="已有页面"
            prop="HavePageName"
          >
            <el-select v-model="form.HavePageName" placeholder="选择页面">
              <el-option label="北京" value="shanghai"></el-option>
              <el-option label="上海" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="AddTarget" label="新增提示目标" prop="TargetName">
            <el-input
              v-model="form.TargetName"
              placeholder="新增提示目标"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="!AddTarget"
            label="已有提示目标"
            prop="HaveTargetName"
          >
            <el-select v-model="form.HaveTargetName" placeholder="选择提示目标">
              <el-option label="你好" value="hello"></el-option>
              <el-option label="再见" value="bay"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="新增提示消息" prop="NewsName">
            <el-input
              v-model="form.NewsName"
              placeholder="新增提示消息"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >立即新增</el-button
            >

            <el-button type="primary" ref="config" @click="FalseForm('form')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单校验
      rules: {
        PageName: [{ required: true, message: "请输入页面", trigger: "blur" }],
        HavePageName: [
          { required: true, message: "请选择页面", trigger: "change" },
        ],
        TargetName: [
          { required: true, message: "请输入目标", trigger: "blur" },
        ],
        HaveTargetName: [
          { required: true, message: "请选择目标", trigger: "change" },
        ],
        NewsName: [
          { required: true, message: "请输入消息提示", trigger: "blur" },
        ],
      },
      // 页面切换
      PageSwitching: false,
      // 目标切换
      AddTarget: false,
      // 禁用
      Disable: false,
      form: {
        PageName: "",
        HavePageName: "",
        TargetName: "",
        HaveTargetName: "",
        NewsName: "",
        region: "",
        date1: "",
        date2: "",
        delivery: true,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    FalseForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("通过!");
          this.$router.push("/conf-center/PromptInformation");
        } else {
          console.log("error submit!!");
        }
      });
    },
    goBack() {
      this.$router.push("/conf-center/PromptInformation");
    },
    SwitchPages() {
      this.$refs.config.$el.click();
      this.PageSwitching = !this.PageSwitching;
      this.AddTarget = this.PageSwitching;
      this.form.HavePageName = "";
      this.form.PageName = "";
      this.form.TargetName = "";
      if (this.PageSwitching == true) {
        this.Disable = true;
      } else {
        this.Disable = false;
      }
    },
    SwitchTarget() {
      this.form.TargetName = "";
      this.form.HaveTargetName = "";
      this.AddTarget = !this.AddTarget;
    },
  },
};
</script>

<style scoped>
::v-deep .el-form-item__label {
  width: 110px !important;
}
.clearfix .el-button {
  float: right;
  padding: 5px 5px;
}
.pageDiv .el-form-item .el-select,
.pageDiv .el-form-item .el-input {
  width: 90%;
}

#page {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 70px 0 200px;
  background-color: rgb(245, 247, 250);
}
.pageDiv {
  width: 100%;
  margin: 0 5%;
  display: inline-block;
}
.addd {
  position: absolute;
  top: 30px;
  left: 30px;
}
.Popup_inputwidth {
  width: 90%;
}
.el-card.box-card.is-always-shadow {
  width: 90%;
}
</style>